/**
 *  *******************useContext*******************
 * 
 *  1. 使用`createContext` 创建Context对象
 *  2. 在顶层组件通过`Provider` 提供数据
 *  3. 在底层组件通过`useContext`函数获取数据
 * 
 */

import React, { createContext, useContext, useState } from "react"
const Context = createContext()
function ComA () {
  const count = useContext(Context)
  return (
    <div>
      this is com a
      <p>
        从app传过来的数据为:{count}
      </p>
      <ComC ></ComC>
    </div>
  )
}
function ComC () {
  const count = useContext(Context)
  return (
    <div>
      this is com c
      <p>
        从app传过来的数据为: {count}
      </p>
    </div>
  )
}

function App () {
  const [count, setCount] = useState(0)
  return (
    <Context.Provider value={count}>
      <div>
        <ComA></ComA>
        <button onClick={() => { setCount(count + 1) }}> 点击</button>
      </div>
    </Context.Provider>

  )
}
export default App
